<script setup>
import {IconEye, IconSearch} from "@arco-design/web-vue/es/icon";
import {ref, onMounted} from 'vue'
import apiAll from "@/api/apiAll.js";
import Detail from './detail.vue'
import {action_column} from "@/utils/tableColumn.js";
import {type_action} from "@/utils/constants.js";
import dayjs from 'dayjs';

const columns = action_column;
const data = ref([])
const param = ref({
  page: 1,
  size: 10,
  total: 0
})
const DetailRef = ref()

const loadData = () => {
  apiAll.actionApi.list(param.value).then(res => {
    data.value = res.data
    param.value.total = res.total
  })
}

const seeDetail = (id) => {
  DetailRef.value.show(id)
}

onMounted(() => {
  loadData()
})
const changePage = (number) => {
  param.value.page = number
  loadData()
}
const changePageSize = (size) => {
  param.value.size = size
  loadData()
}
const dateStart = (v, d, ds) => {
  param.value.start = d
}
const dateEnd = (v, d, ds) => {
  param.value.end = d
}
</script>

<template>
  <div class="flex-column" style="overflow: auto">
    <div class="flex-row" style="margin-bottom: 15px;align-items: center">
      <a-select v-model="param.type" :style="{width:'160px'}" placeholder="请选择类型">
        <a-option value="">全部类型</a-option>
        <a-option v-for="e in type_action" :value="e.type">{{ e.name }}</a-option>
      </a-select>
      <a-date-picker
          style="margin-left: 20px"
          placeholder="请选择开始时间"
          show-time
          :time-picker-props="{ defaultValue: '00:00:00' }"
          format="YYYY-MM-DD HH:mm:ss"
          @ok="dateStart"
          :shortcuts="[
      {
        label: '1小时前',
        value: () => dayjs().add(-1, 'hour')
      },
      {
        label: '12小时前',
        value: () => dayjs().add(-12, 'hour'),
      },
      {
        label: '7天前',
        value: () => dayjs().add(-7, 'day'),
      },
    ]"
      />
      <a-date-picker
          style="margin-left: 10px"
          placeholder="请选择结束时间"
          show-time
          :time-picker-props="{ defaultValue: '00:00:00' }"
          format="YYYY-MM-DD HH:mm:ss"
          @ok="dateEnd"
      />
      <a-button type="primary" style="margin-left: 20px" @click="loadData">
        <template #icon>
          <icon-search/>
        </template>
        <template #default>搜索</template>
      </a-button>
    </div>

    <a-table :columns="columns" :data="data" :pagination="false">
      <template #action="{ rowIndex, record }">
        <div class="flex-row">
          <a-button type="primary" size="mini" @click="seeDetail(record.id)">
            <template #icon>
              <icon-eye/>
            </template>
            <template #default>详情</template>
          </a-button>
        </div>
      </template>
    </a-table>
    <a-pagination @change="changePage" @page-size-change="changePageSize" :total="param.total" show-total show-jumper
                  style="margin-top: 15px" show-page-size/>
    <Detail ref="DetailRef"/>
  </div>
</template>

<style scoped>

</style>